<template>
  <div class="nav-c">
    <div class="nav-logo-c" @click="toIndex">
      <div class="nav-log-image-c">
        <img src="@/assets/xian.png" alt="">
      </div>
      <span>言</span>
    </div>
    <div class="nav-r-c">
      <a-menu v-model="current" mode="horizontal" style="width:429px">
        <a-menu-item key="Index"><router-link to="/"><img class="nav-icon" src="../../assets/nav/index.png" alt="index">首页</router-link></a-menu-item>
        <a-menu-item key="Type"><router-link to="/type"><img class="nav-icon" src="../../assets/nav/type.png" alt="type">分类</router-link></a-menu-item>
        <a-menu-item key="TimeLine"><router-link to="/time-line"><img class="nav-icon" src="../../assets/nav/timline.png" alt="timeline">时间轴</router-link> </a-menu-item>
        <a-menu-item key="About"> <router-link to="/about"><img class="nav-icon" src="../../assets/nav/about_me.png" alt="aboutme">关于我</router-link></a-menu-item>
      </a-menu>
      <a-input-search v-model="searchBlogTitle" class="m-input-search" placeholder="在这里能搜到奇怪的东西" style="width: 200px" @search="onSearch" />
      <router-link v-if="!user.username" to="/login" class="logout">登录/注册</router-link>
      <router-link v-if="user.username" to="/manager">
        <a-dropdown>
          <a-spin :spinning="isLogOutIng">
            <img :src="user.header" class="header-box" alt="header" @error="headerError">
          </a-spin>
          <a-menu slot="overlay">
            <a-menu-item @click="userLogOut">退出登录</a-menu-item>
            <a-menu-item @click="toAdmin">到后台</a-menu-item>
          </a-menu>
        </a-dropdown>
      </router-link>
    </div>
  </div>
</template>

<script>
import userApi from '@/api/myuser'
import { removeToken } from '../../utils/auth'
export default {
  name: 'NavBar',
  data() {
    return {
      current: [this.$route.name],
      user: this.$store.getters.getUser,
      searchBlogTitle: '',
      isLogOutIng: false
    }
  },
  watch: {
    '$store.state.user': function(newVal, oldVal) {
      if (newVal) {
        this.user = this.$store.getters.getUser
      }
    }
  },
  methods: {
    headerError(e) {
      removeToken()
      this.userLogOut()
    },
    toAdmin() {
      window.open('http://www.likunkun.club/admin')
    },
    toIndex() {
      this.$router.push('/index')
    },
    onSearch() {
      if (this.searchBlogTitle.trim() === '') {
        this.$message.error('搜索信息不能为空')
      } else {
        var s = window.encodeURI(this.searchBlogTitle.trim())
        if (this.$route.path !== '/search/' + s) {
          this.$router.push('/search/' + s)
        }
      }
    },
    userLogOut() {
      this.isLogOutIng = true
      userApi.userLogOut().then(res => {
        if (res.code === 200) {
          this.$store.commit('SET_USER', {})
          removeToken()
          this.isLogOutIng = false
          this.$router.push('/index')
        } else {
          this.isLogOutIng = false
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
  .nav-c{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 120px;
    line-height: 70px;
    margin-bottom: 10px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 999;
    .nav-logo-c{
      font-size:16px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      .nav-log-image-c{
        width: 40px;
        height: 40px;
        align-items: center;
        display: flex;
        img{
          width: 100%;
          height: 100%;
        }
      }
      span{
        font-size: 24px;
        margin-left: 5px;
      }
    }
    .nav-r-c{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      margin-right: 40px;
      width: 720px;
      height: 70px;
      .nav-icon{
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      .header-box{
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border:3px solid #a2a2a2;
      }
      .m-input-search{
        margin-right:  20px;
      }
      .ant-menu{
        font-size: 16px;
      }
      .ant-menu-horizontal{
        border-bottom: none;
      }
      .logout{
        color: #333333;
      }
    }
  }

</style>
